<!-- 我的 -->
<template>
    <uni-nav-bar title="我的" :statusBar="true" fixed :border="false" backgroundColor="#4BA9FB" color="#FFFFFF">
    </uni-nav-bar>

    <!-- 头部 -->
    <view class="header" @click="onHeaderClick">
        <image class="headerIcon" v-if="headerIcon"
               :src="headerIcon" mode="scaleToFill"/>
        <image class="headerIcon" v-else src="@/static/images/avatar_none.png" mode="scaleToFill"/>
        <view class="headerTxt">
            <view>姓名：{{ userInfo.nickName }}</view>
            <view>工号：{{ userInfo.jobNumber || '暂无信息' }}</view>
        </view>
    </view>

    <!-- 内容 -->
    <u-cell-group>
        <u-cell :icon="Url.FILE_HOST+'/static/my_mdy_pwd.png'" title="修改密码" :isLink="true"
                arrow-direction="right" @click="onModifyPwdClick">
        </u-cell>
        <u-cell :icon="Url.FILE_HOST+'/static/my_cur_version.png'" title="设备编号" :value="deviceId"></u-cell>
        <u-cell :icon="Url.FILE_HOST+'/static/my_version_icon.png'" title="当前版本" :value="version"></u-cell>
    </u-cell-group>

    <view class="btnLogout" @click="onLogoutClick">退出登录</view>
</template>

<script setup>
import * as Url from "@/net/Url";
import * as Constants from "@/common/Constants";
import {onLoad, onShow} from "@dcloudio/uni-app"
import {getUserFaceReuqest, getUserReuqest} from "@/net/Api";
import {myStore} from "@/stores";

const store = myStore()
const deviceId = ref("")
const version = ref("")
const userInfo = ref("")
const headerIcon = ref("")

computed(() => {
    return {
        Url
    }
})

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
    deviceId.value = store.deviceId
    getAppInfo()
})

onShow(() => {
    getUser()
})

/**
 * 修改用户信息
 */
const onHeaderClick = () => {
    uni.navigateTo({
        url: '/pages/modifyUserInfo/modifyUserInfo',
    })
}

/**
 * 修改密码
 */
const onModifyPwdClick = () => {
    uni.navigateTo({
        url: '/pages/modifyPassword/modifyPassword',
    })
}

/**
 * 退出登录
 */
const onLogoutClick = () => {
    uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success(res) {
            if (res.confirm) {
                uni.setStorageSync(Constants.TOKEN, "")
                uni.redirectTo({
                    url: '/pages/login/login',
                })
            } else if (res.cancel) {
                console.log('取消')
            }
        }
    })
}

/**
 * 获取版本信息
 */
const getAppInfo = () => {
    // #ifdef H5
    const systemInfo = uni.getSystemInfoSync();
    version.value = "v" + systemInfo.appVersion;
    // #endif

    // #ifdef MP-WEIXIN
    try {
        const accountInfo = wx.getAccountInfoSync();
        const appId = accountInfo.miniProgram.appId; // 小程序 appId
        const envVersion = accountInfo.miniProgram.envVersion; // 环境版本: "develop" 开发版, "trial" 体验版, "release" 正式版
        if (envVersion === 'release') {
            // 对于正式版，可以获取具体的版本号
            version.value = "v" + accountInfo.miniProgram.version
        } else {
            // 对于开发版和体验版，可能没有具体的版本号
            version.value = envVersion
        }
        console.log(`AppId: ${appId}, 版本: ${version.value}`);
    } catch (e) {
        console.error('获取小程序信息失败:', e);
    }
    // #endif
}

/**
 * 获取用户（id）
 */
const getUser = () => {
    getUserReuqest({}).then((res) => {
        store.deptId = res.data.useSysDeptId
        store.userId = res.data.id

        store.userInfo = res.data
        userInfo.value = res.data

        getUserFace(res.data.id)
    }).catch((err) => {

    })
}

/**
 * 查询用户人脸照片信息
 */
const getUserFace = (userId) => {
    let params = {
        id: userId
    }
    getUserFaceReuqest(params).then((res) => {
        headerIcon.value = res.data ? Url.FILE_HOST + res.data : ""
    }).catch((err) => {

    })
}
</script>

<style lang="scss" scoped>

.header {
    background: linear-gradient(to bottom, #4BA9FB 0%, #8DC7FC 50%, #B0E1FA 80%, #D4F1FE 100%);
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    align-items: center;
}

.headerIcon {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.headerTxt {
    margin-left: 30rpx;
}

.headerTxt > view {
    margin: 15rpx 0;
    color: #333333;
    font-size: 34rpx;
}

.cellContent {
    width: 100vw;
    box-sizing: border-box;
}

.btnLogout {
    position: absolute;
    bottom: 150rpx;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ECECEC;
    color: #888888;
    padding: 20rpx 120rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
}
</style>